*{
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
}
body{
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 100%;
}

.wrapper{
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.2);
	padding-top:60px;
	box-sizing: border-box;
	.song-img{
		width: 50%;
		height: 0;
		padding-top: 50%;
		position: relative;
		margin:0 auto;
		border:1px solid black;
		.img-wrapper{
			position: absolute;
			left: 0;
			bottom: 0;
			top: 0;
			right: 0;
			img{
				width: 100%;
				height: 100%;
			}
		}
	}
	.song-info{
		width: 100%;
		text-align: center;
		height: 126px;
		margin-top: 40px;
		.song-name{
			font-size: 24px;
			line-height: 36px;
			color: rgba(255,255,255,0.86);
			margin-bottom: 8px;
		}
		.singer-name,.album-name{
			font-size: 12px;
			line-height: 16px;
			margin-top: 6px;
			color: rgba(255,255,255,0.6);
		}
	}
	.pro{
		display: flex;
		.cur-time,.all-time{
			color: #fff;
			width: 60px;
			line-height: 40px;
			text-align: center;
		}
		.pro-wrapper{
			flex: 1;
			position: relative;
			overflow: hidden;
			.pro-top,.pro-bottom{
				height: 1px;
				width: 100%;
				position: absolute;
				top: 20px;
			}
			.pro-bottom{
				background-color: rgba(255,255,255,0.6);
			}
			.pro-top{
				background-color: #fff;
				transform: translateX(-100%);
				position: relative;
				.slider-pointer{
					width: 21px;
					height:21px;
					position: absolute;
					top: -10px;
					right: -10px;
					display: flex;
					justify-content: center;
					align-items: center;
					&::after{
						content:"";
						display: block;
						height:5px;
						width: 5px;
						border-radius: 50%;
						background-color:#fff;
					}

				}
			}
		}
	}
	.control{
		width: 100%;
		position:absolute;
		bottom:0;
		background-color:rgba(0,0,0,0.2);
		height: 60px;
		display: flex;
		.btn-wrapper{
			flex:1;
			
			background-repeat:no-repeat;
			background-position:50%;
			background-size:20px 20px;
		}
		.like-btn{
			background-image: url("../images/icon-like.png");
			&.liking{
				background-image: url("../images/icon-like-solid.png");
			}
		}
		.prev-btn{
			background-image: url("../images/icon-prev.png")
		}
		.play-btn{
			background-image: url("../images/icon-play.png");
			&.pause{
				background-image: url("../images/icon-pause.png");
			}
		}
		.next-btn{
			background-image: url("../images/icon-next.png")
		}
		.list-btn{
			background-image: url("../images/icon-list.png")
		}
	}
	.listUI{
		display: none;
		position:absolute;
		bottom:60px;
		right: 0px;
		width: 70%;
		height: 50%;
		background-color: rgba(30,30,30,1);
		.listUI-song{
			width: 100%;
			height: 50px;
			border-bottom:1px solid white;
			.listUI-songname{
				display: inline-block;
				margin-left:10px;
				line-height: 50px;
				color:#ccc;
				font-size: 18px;
			}
			.listUI-singname{
				display: inline-block;
				margin-left:20px;
				line-height: 50px;
				color:#aaa;
				font-size: 14px;

			}
		}
		
	}
}